/* #ifndef APP-NVUE */
// @import '@/uni_modules/lime-ui/style/index.scss';
@property --l-circle-percent {
  syntax: '<percentage>';
  initial-value: 25%;
  inherits: false;
}
$fill-2: var(--l-fill-2, rgb(0 0 0 / 6%));
$circle-trail-cap-size: var(--l-circle-trail-cap-size, 6px);
$circle-trail-cap-color: currentcolor;//var(--l-circle-trail-cap-color, currentColor);
$circle-stroke-cap-size: var(--l-circle-stroke-cap-size, 6px);
$circle-stroke-cap-start-color: var(--l-circle-stroke-cap-start-color, $fill-2);
$circle-stroke-cap-end-color: var(--l-circle-stroke-cap-end-color, $fill-2);

/*  #endif */
:root {
	display: inline-block;
}

.l-circle {
	position: relative;
	display: inline-block;

	&__inner{
		position: absolute;
		inset: 0;

		/* #ifndef APP-NVUE */
		display: flex;
		justify-content: center;
		align-items: center;

		/*  #endif */
	}

	/* #ifdef APP-NVUE */
	&__view {
		flex: 1;
	}

	/*  #endif */

	/* #ifndef APP-NVUE */
	&__trail,&__stroke {
		position: absolute;
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}

	/*  #endif */
}

/* #ifndef APP-NVUE */
.is-round {
	.l-circle {
		&__trail {
			.cap {
				position: absolute;
				z-index: 10;
				display: block;
				width: $circle-trail-cap-size;
				height: $circle-trail-cap-size;
				background-color: $circle-trail-cap-color;
				border-radius: 50%;

				&.start {
					top: var(--l-circle-trail-cap-start-y, 81%);
					left: var(--l-circle-trail-cap-start-x, 14%);
				}

				&.end {
					top: var(--l-circle-trail-cap-end-y, 81%);
					left: var(--l-circle-trail-cap-end-x, 14%);
				}
			}
		}

		&__stroke .cap{
			position: absolute;
			display: block;
			width: $circle-stroke-cap-size;
			height: $circle-stroke-cap-size;
			background-color: $circle-stroke-cap-start-color;

			/* z-index: 10; */
			border-radius: 50%;
			opacity: var(--l-circle-stroke-cap-opacity, 0);
			transition: opacity 350ms ease-out;

			&.start {
				top: var(--l-circle-stroke-cap-start-y, 81%);
				left: var(--l-circle-stroke-cap-start-x, 14%);
				background-color: $circle-stroke-cap-start-color;
			}

			&.end {
				top: var(--l-circle-stroke-cap-end-y, 81%);
				left: var(--l-circle-stroke-cap-end-x, 14%);
				z-index: -1;
				background-color: $circle-stroke-cap-end-color;
			}
		}
	}
}

.clockwise {
	transform: translateY(var(--l-circle-offset-top, 0)) scale(-1,1);
}

.clockwise .l-circle__inner{
	transform: scale(-1,1);
}

/*  #endif */